<template>
    <div>
        <div class="list">
            <el-table :data="topicList" stripe style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"/>
                <el-table-column prop="type_name" label="课题分类" />
                <el-table-column prop="title" label="标题" width="180" />
                <el-table-column prop="conents" label="课题要求" width="520" />
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span :style="getClass(scope.row.state)">{{ getState(scope.row.state) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="年份" />
                <el-table-column prop="members" label="人数上限" />
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="text" size="medium">修改</el-button>
                        <el-button @click="del(scope.row.id)" type="text" size="medium" style="color: #e47470;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize" @current-change="cheangePage" />
        </div>
        <el-dialog title="修改课题" :visible.sync="showDialog" width="40%" :before-close="closeEdit">
            <AddTopic :vForm="vForm" @getData="getAddTopicData" :key="new Date().getTime()" />
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import AddTopic from "co/AddTopic";
export default {
    name: 'WebMyTopic',
    components: { AddTopic },
    data() {
        return {
            teacher_id: this.$cookies.get('userInfo').id,
            type: 0,
            page: 0,
            pagesize: 11,
            showDialog: false,
            vForm: {}
        };
    },
    computed: {
        ...mapState('Topic', ['topicList', 'typeList', 'total']),
        getState() {
            return (state) => {
                switch (state) {
                    case 0: return '待审核';
                    case 1: return '驳回';
                    case 2: return '审核通过';
                }
            }
        },
        getClass() {
            return (state) => {
                let color = '';
                switch (state) {
                    case 0: color = '#DCA550'; break;
                    case 1: color = '#E47470'; break;
                    case 2: color = '#5A9CF8'; break;
                }
                return { color }
            }
        },
    },
    methods: {
        ...mapActions('Topic', ['getMyTopic', 'getTypes', 'delTopic','editTopic']),
        edit(e) {
            this.showDialog = true;
            this.vForm = e;
        },
        del(id) {
            let { teacher_id, type, page, pagesize } = this;
            this.delTopic({ id, teacher_id, type, page, pagesize });
        },
        cheangePage(page) {
            this.page = --page;
            this.getData();
        },
        getData() {
            let { teacher_id, type, page, pagesize } = this;
            this.getMyTopic({ teacher_id, type, page, pagesize });
        },
        getAddTopicData(e) {
            this.editTopic(e).then(res => {
                this.showDialog = false;
                this.getData();
            })
        },
        closeEdit() {
            this.showDialog = false;
            this.vForm = {};
        },
    },
    mounted() {
        this.getData();
        this.getTypes();
    },
};
</script>

<style lang="less" scoped>
@import "asle/index.less";

.page {
    .pos_f();
    .pos_rb(20px, 20px);
}
</style>